/**
 * 引入头部和尾部、返回顶部按钮、商品列表
 * 
 */
$("#header").load("header.html");
$("#footer").load("footer.html");
$("#rTop").load("rTop.html");
$(".product_typelist").load("mengList.html");

/**
 * 
 * $$ 选择器
 * 
 */
let $$ = (selector,all) =>{
    if(all){
          return document.querySelectorAll(selector);
    }
    return document.querySelector(selector);
}
let [js_product, change_btn, next, prev] = [
    $$(".js_product"), $$(".change_btn"), $$("#next"), $$("#prev")
];
class Paging{
    constructor(){}
    init(js_product, change_btn, next, prev, productList){
        this.js_product = js_product;
        this.change_btn = change_btn;
        this.next = next;
        this.prev = prev;
        this.res = productList;
        this.btnList = [];
        this.url = "../json/fenye.json";
        // 一页显示多少个
        this.renderNum = 40;
        // 页码
        this.page = 1;
        this.page_total = 0;
        this.renderPage();
        this.renderBtn();
        this.bindEvent();
    }
    bindEvent(){
        this.next.addEventListener("click", this.toNext.bind(this));
        this.prev.addEventListener("click", this.toPrev.bind(this));
        this.btnList.forEach((ele, index)=>{
            ele.addEventListener("click", this.toPage.bind(this, index+1));
        })
        this.next.parentNode.addEventListener("click", this.reRender.bind(this));
    }
    reRender(){
        this.btnList.forEach((ele, index)=>{
            if(index + 1 === this.page){
                ele.className = "active";
            }else{
                ele.className = "";
            }
        })
        this.renderPage();
    }
    toNext(){
        if(this.page === this.page_total){
            return false;
        }else{
            this.page++;
        }
    }
    toPrev(){
        if(this.page === 1){
            return false;
        }else{
            this.page--;
        }
    }
    toPage(index){
        this.page = index;
    }
    renderBtn(){
        this.page_total = this.res.Data.length / this.renderNum;
        let btnWrap = document.createDocumentFragment();
        for(var i = 1; i <= this.page_total; i++){
            let a = document.createElement("a"); 
            a.innerHTML = i;
            if(i === this.page){
                a.className = "active";
                // a.href = "http://www.hanfugou.com/product?p=2"
            }
            btnWrap.appendChild(a);
            this.btnList.push(a);
        }
        this.next.parentNode.insertBefore(btnWrap, this.next);
    }
    renderPage(){
        let productArr = this.res.Data;
        let html = "";
        
        for(var i = this.renderNum * (this.page - 1); i < this.renderNum * this.page; i++){
            let item = productArr[i];
            if(!item) continue;
            html += '<li class="post">'+
                        '<a class="img" href="http://www.hanfugou.com/product/'+item.ID+'?from=type&k=" target="_blank">'+
                            '<img src="../images/loading.gif" data-src="'+item.FaceSrc+'" alt="'+item.Name+'">'+
                        '</a>'+
                        '<p class="price">'+
                            '<span class="buy">￥'+item.Price+'</span>'+
                        '</p>'+
                        '<p class="name long_hide">'+
                            '<a href="http://www.hanfugou.com/product/'+item.ID+'?from=type&k=" target="_blank">'+item.Name+'</a>'+
                        '</p>'+
                        '<p class="other">'+
                            '<a href="http://www.hanfugou.com/shop/'+item.Shop.ID+'?from=type" class="shop" target="'+item.Shop.ID+'">'+item.Shop.Name+'</a>'+
                            '<i class="icon bg_purple ml5">包邮</i>'+
                        '</p>'+
                    '</li>'
        }
        this.js_product.innerHTML = html;
        lazyload(".img img");
    }
}
var paging = new Paging();
paging.init(js_product, change_btn, next, prev, productList);